<template>
	<el-row type="flex" justify="center">
		<el-col>
			<el-input v-model="input" placeholder="请输入查询关键字" clearable @input="searchChange" @clear="clearSearch"></el-input>
		</el-col>
	</el-row>
	<el-row type="flex" justify="center">
		<el-col>
			<el-button @click="clearFilter">重置筛选(定位和稀有度)</el-button>
		</el-col>
	</el-row>
	<el-table :data="role" height="60vh" style="width: 100%" border v-loading="loading" ref="filterTable">
		<el-table-column prop="序号" label="序号" fixed align="center" :resizable="false"></el-table-column>
		<el-table-column prop="名字" label="名字" align="center" :resizable="false" fixed/>
		<el-table-column prop="星球" label="星球" align="center" :resizable="false"></el-table-column>
		<el-table-column prop="获得途径" label="获得途径" align="center" :resizable="false" />
		<el-table-column prop="元素" label="元素" align="center" :resizable="false" />
		<el-table-column label="定位" column-key="定位" align="center" :filters="[{text:'攻击',value:'攻击'},{text:'防御',value:'防御'}]"
		 :filter-method="filterPosition" :resizable="false">
			<template #default="scope">
				<el-tag :type="scope.row.定位==='攻击'?'danger':''">{{scope.row.定位}}</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="性别" label="性别" align="center" :resizable="false" />
		<el-table-column prop="技能效果" label="技能效果" :resizable="false" />
		<el-table-column label="装备技能" align="center">
			<el-table-column prop="装备技能一" label="装备技能一" :resizable="false" />
			<el-table-column prop="装备技能二" label="装备技能二" :resizable="false" />
			<el-table-column prop="装备技能三" label="装备技能三" :resizable="false" />
			<el-table-column prop="装备技能四" label="装备技能四" :resizable="false" />
		</el-table-column>
		<el-table-column label="皮肤技能" align="center">
			<el-table-column prop="皮肤技能一" label="皮肤技能一" :resizable="false" />
			<el-table-column prop="皮肤技能二" label="皮肤技能二" :resizable="false" />
			<el-table-column prop="皮肤技能三" label="皮肤技能三" :resizable="false" />
		</el-table-column>
		<!-- <template v-for="(col,key) in cols" :key="key">
			<el-table-column :prop="col.prop" :label="col.prop" :resizable="false" />
		</template> -->
		<el-table-column label="稀有度" align="center" column-key="稀有度" :filters="[{ text: '彩', value: '彩' },{ text: '金', value: '金' }, { text: '紫', value: '紫' },{ text: '蓝', value: '蓝' },{ text: '灰', value: '灰' }]"
		 :filter-method="filterTag" :resizable="false">
			<template #default="scope">
				<el-tag effect="dark" :color="scope.row.稀有度==='金'?'#c37e00':scope.row.稀有度==='紫'?'#8552a1':scope.row.稀有度==='蓝'?'#145b7d':scope.row.稀有度==='灰'?'#77787b':'black'">{{scope.row.稀有度}}</el-tag>
			</template>
		</el-table-column>
	</el-table>
	<div class="block">
		<el-pagination small layout="total, prev, pager, next" :page-size="50" :total="total" background @current-change="handleCurrentChange"
		 v-model:current-page="currentPage">
		</el-pagination>
	</div>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	export default {
		components: {},
		setup() {
			const filterTable=ref(null);
			const datas = reactive({
				"role": null,
				"role_bak": null,
				"role_fitter": null,
				"input": "",
				"loading": true,
				"total": 0,
				"currentPage": 1,
				cols: [{
					"prop": "获得途径"
				}, {
					"prop": "定位"
				}, {
					"prop": "元素"
				}, {
					"prop": "性别"
				}, {
					"prop": "技能名称"
				}, {
					"prop": "技能效果"
				}, {
					"prop": "技能强化属性"
				}, {
					"prop": "装备技能1"
				}, {
					"prop": "解锁等级"
				}, {
					"prop": "装备技能2"
				}, {
					"prop": "解锁等级"
				}, {
					"prop": "装备技能3"
				}, {
					"prop": "解锁等级"
				}, {
					"prop": "装备技能4"
				}, {
					"prop": "解锁等级"
				}, {
					"prop": "皮肤技能1"
				}, {
					"prop": "皮肤技能2"
				}, {
					"prop": "皮肤技能3"
				}]
			});
			const {
				proxy
			} = getCurrentInstance();
			//获取数据
			proxy.$axios.get("./role.json").then(res => {
				let data = res.data;
				datas.loading = true;
				datas.role = data.slice(0, 50);
				datas.role_bak = data;
				datas.total = data.length;
				datas.loading = false;
			});
			//稀有度筛选
			//v=>筛选值,row=>行数据
			const filterTag = (v, row) => {
				return row.稀有度 === v;
			};
			//定位筛选
			const filterPosition = (v, row) => {
				return row.定位 === v;
			};
			//查询
			const searchChange = () => {
				if (datas.input == "") {
					clearSearch();
					return;
				}
				datas.loading = true;
				let data = datas.role_bak.filter((item) => {
					let arr = Object.values(item).toString();
					let index = arr.indexOf(datas.input);
					if (index >= 0) {
						return item;
					}
				});
				datas.currentPage = 1;
				datas.total = data.length;
				datas.role_fitter = data;
				datas.role = datas.role_fitter.slice(0, 50);
				datas.loading = false;
			};
			//清空查询
			const clearSearch = () => {
				let data = datas.role_bak;
				datas.loading = true;
				datas.currentPage = 1;
				datas.role = data.slice(0, 50);
				datas.total = data.length;
				datas.role_fitter = null;
				datas.loading = false;
			};
			//分页
			//page=>页码,limit=>每页条数
			const paging = (page, limit = 50) => {
				if (datas.input == "") {
					datas.role = datas.role_bak.slice((page - 1) * limit, page * limit);
				} else {
					datas.role = datas.role_fitter.slice((page - 1) * limit, page * limit);
				}
			};
			//翻页
			//v=>页码
			const handleCurrentChange = (v) => {
				paging(v)
			};
			const clearFilter=()=>{
				filterTable.value.clearFilter();
			};
			return {
				filterTable,
				filterTag,
				searchChange,
				clearSearch,
				paging,
				handleCurrentChange,
				filterPosition,
				clearFilter,
				...toRefs(datas)
			};
		}
	}
</script>

<style>
</style>
